<template>
  <div class="charts-map">
    <div style="width: 100%; height: 100%"
         id="main"></div>
  </div>
</template>

<script>
import { Scene, HeatmapLayer } from '@antv/l7'
import { GaodeMap } from '@antv/l7-maps'
import { log } from '@antv/g2plot/lib/utils'

export default {
  name: 'pageSecond',
  data() {
    return {
      data1: {},
      data: {
        'type': 'FeatureCollection',
        'crs': { 'type': 'name', 'properties': { 'name': 'urn:ogc:def:crs:OGC:1.3:CRS84' } },
        'features': [
          { 'properties': { 'mag': 10.3 }, 'geometry': { 'type': 'Point', 'coordinates': [121.4316962, 31.36082325] } },
          { 'properties': { 'mag': 10.3 }, 'geometry': { 'type': 'Point', 'coordinates': [121.4316962, 31.26182325] } },
          { 'properties': { 'mag': 10.3 }, 'geometry': { 'type': 'Point', 'coordinates': [121.4316962, 31.26282325] } },
          { 'properties': { 'mag': 10.3 }, 'geometry': { 'type': 'Point', 'coordinates': [121.431762, 31.26082325] } }
        ]
      }
    }
  },
  created() {
    this.getData()
  },
  mounted() {
    this.$nextTick(() => {
      this.draw()
    })
  },
  methods: {
    getData() {
      this.$http({
        method: 'get',
        url: '/api/datareport.ashx?action=!StoreSalesTmp',
        params: { para1: 'HeatMap' }
      }).then(res => {
        console.log('111111', res);
        if (res.status === 200) {
          // this.data1 = eval("(" + res.data + ")") // 此方法可以将后端发来的非JSON数据转为js
          this.data = res.data.dt
          console.log('%c [ this.data ]', 'font-size:13px; background:pink; color:#bf2c9f;', this.data)
        }
      })
    },
    draw() {
      const scene = new Scene({
        id: 'main',
        map: new GaodeMap({
          style: 'dark',
          pitch: 0,
          center: [121.4316962, 31.26082325],
          zoom: 11.056,
          visible: false,
          maxZoom: 14,
          minZoom: 6,
          token: '03c95f5b45034ba86da1923a9e70a59e'
        })
      })
      scene.on('loaded', () => {
        const layer = new HeatmapLayer({})
          .source(this.data)
          .shape('heatmap')
          .size('mag', [0, 2]) // weight映射通道
          .style({
            intensity: 2,
            radius: 15,
            opacity: 1.0,
            rampColors: {
              colors: [
                '#ff7500',
                '#ffa400',
                '#a3d900',
                '#91EABC',
                '#177cb0',
                '#065279'
              ].reverse(),
              positions: [0, 0.4, 0.6, 0.7, 0.9, 1.0]
            }
          })
        scene.addLayer(layer)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.charts-map {
  width: 100%;
  height: 100%;
  border: 1px solid white;
}
</style>
